import React from "react";
import logo from '../../logo.svg'
import "../../common/CSS/common.css"
import "./Menu.css"
import { MenuItem } from "./MenuItem.js";
import * as Acro from '@arco-design/web-react/icon';
/**
 * 菜单栏
 */
const itemOptions=[
    {
        itemType:'Title',
        Data:{
            title:'导航',
            
        }
    },{
        itemType:'Node',
        Data:{
            title:'首页',
            icon:<Acro.IconHome />,
            route:'/article',
        }
    },{
        itemType:'Node',
        Data:{
            title:'归档',
            icon:<Acro.IconArchive />,
            route:'/archives',
            pageTitle:{
                title:'文章归档',
                desc:'继续努力喔',
                actionType:1,
            }
        }
    },{
        itemType:'Node',
        Data:{
            title:'留言',
            icon:<Acro.IconAt />,
            route:'/message',
            pageTitle:{
                title:'留言板',
                desc:'',
                actionType:1,
            }
        }
    },{
        itemType:'Node',
        Data:{
            title:'相册',
            route:'/images',
            icon:<Acro.IconImage />,
            pageTitle:{
                title:'旅行相册',
                desc:'这些都是我百度的',
                actionType:1,
            }
        }
    },{
        itemType:'Node',
        Data:{
            title:'关于',
            route:'/about',
            icon:<Acro.IconBook />,
            pageTitle:{
                title:'关于',
                desc:'',
                actionType:1,
            }
        }
    },{
        itemType:'Node',
        Data:{
            title:'链接',
            route:'/links',
            icon:<Acro.IconLink />,
            pageTitle:{
                title: false,//'友情链接',
                desc:'',
                actionType:1,
                TitleData:false
            }
        }
    },{
        itemType:'Title',
        Data:{
            title:'组成'
        }
    },{
        itemType:'Node',
        Data:{
            title:'分类',
            extraStyle:{
                class:'rightIcon',
                css:{}
            },
            extra:<Acro.IconRight style={{fontSize:'12px'}}></Acro.IconRight>,
            icon:<Acro.IconApps />,
            children:[
                {
                    itemType:'Node',
                    
                    Data:{
                        title:'技能学习',
                        extraStyle:{
                            class:'extraButton',
                            css:{}
                        },
                        extra:<div>49</div>,
                        route:"/article",
                        routeData:{
                            state:{
                                cate:"cate1",
                                pageTitle:{
                                    title:'技能学习下的文章',
                                    desc:'',
                                    actionType:1,
                                }
                            },
                            
                        },
                    }
                },{
                    itemType:'Node',
                    Data:{
                        title:'生活随笔',
                        extraStyle:{
                            class:'extraButton',
                            css:{}
                        },
                        extra:<div>5</div>,
                        route:"/article",
                        routeData:{
                            state:{
                                cate:"cate2",
                                pageTitle:{
                                    title:'生活随笔下的文章',
                                    desc:'',
                                    actionType:1,
                                }
                            }
                        }
                    }
                },{
                    itemType:'Node',
                    Data:{
                        extraStyle:{
                            class:'extraButton',
                            css:{}
                        },
                        title:'旅行相册',
                        extra:<div>9</div>,
                        route:'/images',
                        routeData:{
                            state:{
                                pageTitle:{
                                    title:'旅行相册的记录',
                                    desc:'',
                                    actionType:1,
                                }
                            }
                        }
                    },
                }
            ]
        }
    },{
        itemType:'Node',
        Data:{
            title:'页面',
            extraStyle:{
                class:'rightIcon',
                css:{}
            },
            extra:<Acro.IconRight style={{fontSize:'12px'}}></Acro.IconRight>,
            icon:<Acro.IconDriveFile />,
            children:[
                {
                    itemType:'Node',
                    Data:{
                        title:'时光机',
                        route:'/cross'
                    }
                }
            ]
        }
    },{
        itemType:'Node',
        Data:{
            title:'友链',
            extraStyle:{
                class:'rightIcon',
                css:{}
            },
            extra:<Acro.IconRight style={{fontSize:'12px'}}></Acro.IconRight>,
            icon:<Acro.IconUserGroup />,
            children:[
                {
                    itemType:'Node',
                    Data:{
                        title:'硅云',
                        outLink:'https://www.vpsor.cn/'
                    }
                },
                {
                    itemType:'Node',
                    Data:{
                        title:'Ptython教程',
                        outLink:'https://www.python66.com/'
                    }
                },
                {
                    itemType:'Node',
                    Data:{
                        title:'Easy Blog',
                        outLink:'https://www.haowenbo.com/'
                    }
                },
                {
                    itemType:'Node',
                    Data:{
                        title:'十年之约',
                        outLink:'https://www.foreverblog.cn/'
                    }
                }
            ]
        }
    }
]
export function Menu({setTitle}){
    const itemList=itemOptions.map(node=><MenuItem setTitle={setTitle} itemType={node.itemType} Data={node.Data}></MenuItem>)
    return(
        <div className="Menu" id='Menu'>
            {/**头像、名称 */}
            <div className="MyInfo">
                <img className="Avatar" src="https://www.guitu18.com/usr/images/author.jpg"/>
                <div className="MyName">夜月归途</div>
            </div>
            <div style={{
                height:'calc(100% - 100px)',
                overflow:"auto"
            }}>
                {itemList}
            </div>
            
        </div>
    )
}
